<template>
<Card :bordered="false" dis-hover class="ivu-mt">
    <Row type="flex" :gutter="12">
        <Col span="3">
            <List class="listContent">
                <ListItem
                    v-for="item in mylisttotal"
                    :key="item.id"
                    :class="status === item.id ? 'active' : null"
                    style="cursor: pointer;"
                >
                    <div
                        @click="changeIndex(item)"
                        style="
                            width: 300px;
                            padding-left: 20px;
                            box-sizing: border-box;
                            height: 100%;
                            display: flex;
                            align-items: center;
                        "
                    >
                        {{ item.name }}({{item.num||0}})
                    </div>
                </ListItem>
            </List>
        </Col>
        <Col span="21">
            <Tabs v-model="value" v-if="Tabslist.length>0" @on-click="clicktab" :animated="false">
                <TabPane :label="item.title" :name="`${index}`" v-for="(item, index) in Tabslist" :key="item.id">
                    <Card dis-hover class="sky-inr ivu-mb-16"><span class="ivu-mr-16">任务时间：{{item.start_time_str}}~{{item.end_time_str}}</span>
                        <!-- <span class="ivu-mr-16">任务人：<tag v-for="(items, index) in item.member_name_arr" :key="index">{{items}}</tag></span> -->
                        <span>
                            <Tooltip transfer  max-width="300">
                                <Tag
                                    v-if="+index <= 3"
                                    v-for="(items, index) in item.member_name_arr"
                                    :key="index"
                                    >
                                    {{ items }}
                                </Tag><Tag v-if="item.member_name_arr.length>5">+{{item.member_name_arr.length-4}}</Tag>
                                <Tag
                                    slot="content"
                                    v-for="(items, index) in item.member_name_arr"
                                    :key="index"
                                    >{{ items }}</Tag
                                >
                            </Tooltip>
                        </span>
                        <span class="ivu-mr-16">回访人数：{{item.callback_num}}人/{{item.total_num}}人</span>
                        <!-- <span class="ivu-mr-16">备注：{{item.remark}}</span> -->
                        <p>
                            <Tooltip transfer v-if="item.remark" max-width="400" placement="bottom-end">
                                <span slot="content">{{item.remark}}</span>
                                <div style="width:400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">备注：{{item.remark}}</div>
                            </Tooltip>
                            <span v-else>备注：</span>
                        </p>
                        <Progress :percent="item.rate*1" />
                    </Card>
                    <Row :gutter="16" type="flex" class="ivu-mb-16">
                        <Col>
                            <DatePicker transfer type="daterange" v-model="timedate" :options="options" placeholder="请选择上次到诊日期"
                                v-width="180" @on-change="askDatadate"></DatePicker>
                        </Col>
                        <Col>
                            <Input placeholder="请输入患者姓名/手机号/诊疗号" v-model="params.keywords" clearable @on-enter="askDatasearch"
                                @on-clear="askDatasearch" v-width="220"/>
                        </Col>
                        <Col>
                            <Select transfer placeholder="归属人" v-model="params.belong_member_id" filterable clearable v-width="150"
                                @on-change="askDataings">
                                <Option v-for="item in condition.member_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col>
                            <Select transfer placeholder="患者状态" v-model="params.outpatient_type_id" filterable clearable v-width="150"
                                @on-change="askDataings">
                                <Option v-if="+item.status === 1" v-for="item in condition.outpatient_type_list" :key="item.id" :value="item.id">{{ item.name }}
                                </Option>
                            </Select>
                        </Col>
                    </Row>
                    <Table size="small" ref="table" :columns="columns" :data="datalist" :loading="loading" @on-sort-change="handleChangeSort">
                        <template slot-scope="{ row }" slot="info">
                            <a href="javaScript:;" @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} ,
                                {{ row.gender_str }}</a>
                        </template>
                        <template slot-scope="{ row }" slot="diagnosis">
                            <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
                        </template>
                        <template slot-scope="{ row }" slot="label">
                            <Poptip word-wrap trigger="hover" placement="right" width="400">
                                <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index" v-if="index < 3">
                                    {{ item }}</Tag>
                                <div slot="content">
                                    <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                                </div>
                            </Poptip>
                        </template>
                        <template slot-scope="{ row }" slot="patient_card_id">
                            <span v-if="row.patient_card_id">
                                <span v-if="row.patient_card_id.length < 15">
                                    {{row.patient_card_id}}
                                </span>
                                <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                    :content="row.patient_card_id">
                                    {{row.patient_card_id.substring(0, 15)}}…
                                </Poptip>
                            </span>
                            <span v-else>无</span>
                        </template>
                        <template slot-scope="{ row }" slot="next_revisiting_time_str">
                            <div v-if="!row.show" class="DatePicker " @click="DatePicker (row)">
                                {{row.next_revisiting_time_str === '' ? '&#12288' : row.next_revisiting_time_str}}
                            </div>
                            <DatePicker :transfer="true" v-if="row.show" v-model="next_revisiting_time_strs"
                                placement="bottom" :options="options6" confirm type="date" placeholder="请选择下次复诊时间"
                                style="width: 80px" @on-ok="confirm(row)" @on-clear="OnClear(row)"></DatePicker>
                        </template>
                        <template slot-scope="{ row }" slot="belong_member_name">
                            <span v-if="row.belong_member_name">
                                <span v-if="row.belong_member_name.length < 4">
                                    {{row.belong_member_name}}
                                </span>
                                <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                    :content="row.belong_member_name">
                                    {{row.belong_member_name.substring(0, 4)}}…
                                </Poptip>
                            </span>
                            <span v-else>无</span>
                        </template>
                        <template slot-scope="{ row }" slot="channel">
                            <Badge status="success" :text="row.source_name" />
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <a @click="handleOpenDrawer(row.id)">编辑</a>
                            <Divider type="vertical" />
                            <span v-if="+status === 1 || +status === 2">
                                <a @click="handleOpenSubmit(row)" v-if="+row.callback_id === 0">回访</a>
                                <a disabled v-else>已回访</a>
                            </span>
                            <span v-else>
                                <a disabled v-if="+row.callback_id === 0">回访</a>
                                <a disabled v-else>已回访</a>
                            </span>
                        </template>
                        <template slot-scope="{ row }" slot="remark">
                            <Tooltip :content="row.remark" :delay="500" placement="left" theme="light" max-width="500"
                                :word-wrap="true" :transfer="true">
                                <span
                                    style="font-size: 12px">{{  row.remark && row.remark.length > 14 ? row.remark.slice(0, 14) +  '...' : row.remark }}</span>
                            </Tooltip>
                        </template>
                    </Table>
                    <div class="ivu-mt ivu-text-center">
                        <Page class="ivu-mb-8" show-total show-elevator show-sizer :total="total" transfer :current.sync="params.page"
                            :page-size="params.pageSize" :page-size-opts="pageOpts" @on-change="changepage"
                            @on-page-size-change="changepageSize" />
                    </div>
                </TabPane>
            </Tabs>
            <div class="nodata" v-if="spinShow"><span>暂无数据</span></div>
            <Spin size="large" fix v-if="spinShows"></Spin>
        </Col>
    </Row>
    <table-model ref="editModel" @updateShow="askDataing" />
    <!-- <edit-patient ref="editPatient" @ok="onLoad" /> -->
    <edit-patient ref="editPatient" />
    <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
        <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId">
        </detailDrawer>
    </Drawer>
</Card>
</template>
<script>
    import EditPatient from '../../patient/patient-list/modules/editPatient'
    import tableModel from '@/components/visitModel/table-model';
    import detailDrawer from '../../patient/patient-detail/index.vue'
    import {
        worktaskmylist,
        worktaskmylisttotal,
        worktaskpatientlist,
        worktaskinfo
    } from '@api/tasklist';
    export default {
        components: {
            EditPatient,tableModel,detailDrawer
        },
        data () {
            return {
                value:'0',
                status: 1,
                mylisttotal: [
                    { id: 1, name: '进行中',num: ''},
                    { id: 2, name: '已延期',num: ''},
                    { id: 0, name: '未开始',num: ''},
                    { id: 3, name: '已完成',num: ''},
                    { id: 4, name: '已关闭',num: ''},
                ],
                options:{
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                spinShow: false,
                spinShows: false,
                pageOpts: [10, 15, 20, 30, 50],
                params: {
                    task_id: '',
                    belong_member_id: '',
                    start_last_revisiting_time: '',
                    end_last_revisiting_time: '',
                    keywords: '',
                    outpatient_type_id: '',
                    sort_next_revisiting_type: 0,
                    sort_last_callback_type: 0,
                    sort_next_callback_type: 0,
                    sort_revisiting_type: 0,
                    sort_missed_type: 0,
                    sort_callback_type: 0,
                    sort_last_revisiting_type: 0,
                    page: 1,
                    pageSize: 10,
                },
                total: 0,
                datalist: [],
                loading: false,
                condition: {
                    member_list:[],
                    outpatient_type_list:[]
                },
                columns: [
                    {
                        title: '基本信息',
                        slot: 'info',
                        minWidth: 150,
                        fixed: 'left'
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        slot: 'patient_card_id',
                        minWidth: 110
                    },
                    {
                        title: '上次到诊',
                        key: 'last_revisiting_time_str',
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: '未到诊天数',
                        key: 'missed_days',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 120
                    },
                    {
                        title: '下次复诊',
                        key: 'next_revisiting_time_str',
                        slot: 'next_revisiting_time_str',
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: '复诊次数',
                        key: 'revisiting_count',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '断诊次数',
                        key: 'fault_diagnosis_count',
                        // sortable: true,
                        // sortable: 'custom',
                        minWidth: 100
                    },
                    {
                        title: '上次回访时间',
                        key: 'last_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '下次回访时间',
                        key: 'next_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '回访次数',
                        key: 'callback_count',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '患者标签',
                        slot: 'label',
                        minWidth: 180
                    },
                    {
                        title: '就诊类型',
                        slot: 'diagnosis',
                        minWidth: 100
                    },
                    {
                        title: '地区',
                        key: 'city_name',
                        minWidth: 160
                    },
                    {
                        title: '备注',
                        minWidth: 120,
                        ellipsis: true,
                        tooltip: true,
                        key: 'remark'
                    },
                    {
                        title: '来源',
                        minWidth: 120,
                        slot: 'channel'
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80
                    },
                    {
                        title: '归属人',
                        key: 'belong_member_name',
                        slot: 'belong_member_name',
                        minWidth: 120
                    },
                    {
                        title: '病种',
                        key: 'diseases_name',
                        minWidth: 120
                    },
                    {
                        title: '操作',
                        minWidth: 125,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                showTetailDrawer: false,
                patientId: '',
                edit_type: 3,
                Tabslist: [],
                timedate: [],
            }
        },
        computed: {
        },
        methods: {
            // 回访
            handleOpenSubmit(row) {
                this.$refs.editModel.handleShow(row, this.typeList, row.patient_tags_name_arr, 2)
            },
            // 编辑
            handleOpenDrawer(id) {
                this.$refs.editPatient.handleOpenDrawer(id, 3)
            },
            // 患者详情
            handleDetailPatient(row) {
                this.showTetailDrawer = true
                this.patientId = row.id
            },
            initial(){
                worktaskmylisttotal().then(res=>{
                    this.mylisttotal[2].num = res.wait
                    this.mylisttotal[0].num = res.start
                    this.mylisttotal[1].num = res.delay
                    this.mylisttotal[3].num = res.success
                    this.mylisttotal[4].num = res.close
                })
                this.askDatas(this.status)
            },
            askDatas(status){
                this.value = '0'
                this.spinShows = true
                this.datalist = []
                worktaskmylist({status}).then(res=>{
                    this.spinShows = false
                    this.Tabslist = res.list
                    this.condition.member_list = res.patient_list.condition.member_list
                    this.condition.outpatient_type_list = res.patient_list.condition.outpatient_type_list
                    this.datalist = res.patient_list.list
                    this.total = res.patient_list.total
                    if (this.Tabslist.length>0){
                        this.params.task_id = this.Tabslist[0].id
                        this.spinShow = false
                    } else {
                        this.spinShow = true
                    }
                })
            },
            askDataing(){
                this.clicktab(this.value)
                worktaskinfo({id:this.Tabslist[this.value].id}).then(res=>{
                    this.Tabslist[this.value].rate = res.rate
                    this.Tabslist[this.value].callback_num = res.callback_num
                })
            },
            changeIndex(item){
                this.value = '0'
                this.datalist = []
                this.status = item.id
                this.params.page = 1;
                this.params.pageSize = 10;
                this.initial()
            },
            clicktab(e){
                this.params = {
                    task_id: this.Tabslist[e].id,
                    belong_member_id: '',
                    start_last_revisiting_time: '',
                    end_last_revisiting_time: '',
                    keywords: '',
                    outpatient_type_id: '',
                    sort_next_revisiting_type: 0,
                    sort_last_callback_type: 0,
                    sort_next_callback_type: 0,
                    sort_revisiting_type: 0,
                    sort_missed_type: 0,
                    sort_callback_type: 0,
                    sort_last_revisiting_type: 0,
                    page: 1,
                    pageSize: 10,
                }
                this.askData()
            },
            askData(){
                this.loading = true
                this.datalist = []
                worktaskpatientlist(this.params).then(res=>{
                    this.total = res.total
                    this.datalist = res.list
                    this.loading = false
                })
            },
            /* @函数功能: 分页 */
            changepage(e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            changepageSize(e) {
                this.params.pageSize = e;
                this.askData();
            },
            askDatadate(e){
                this.params.page = 1;
                this.params.pageSize = 10;
                this.params.start_last_revisiting_time = e[0];
                this.params.end_last_revisiting_time = e[1];
                this.askData();
            },
            askDataings(){
                this.params.page = 1;
                this.params.pageSize = 10;
                this.askData();
            },
            askDatasearch(e){
                this.params.belong_member_id = ''
                this.params.outpatient_type_id = ''
                this.params.sort_next_revisiting_type = 0
                this.params.sort_last_callback_type = 0
                this.params.sort_next_callback_type = 0
                this.params.sort_revisiting_type = 0
                this.params.sort_missed_type = 0
                this.params.sort_callback_type = 0
                this.params.sort_last_revisiting_type = 0
                this.params.page = 1
                this.params.pageSize = 10
                this.askData();
            },
            // 排序
            handleChangeSort(column) {
                switch (column.key) {
                    case 'last_revisiting_time_str':
                        column.order === 'asc' ? this.params.sort_last_revisiting_type = 1 : column.order === 'normal' ? this.params.sort_last_revisiting_type = 0 : this.params.sort_last_revisiting_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_last_callback_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_callback_type = 0
                        break;
                    case 'next_revisiting_time_str':
                        column.order === 'asc' ? this.params.sort_next_revisiting_type = 1 : column.order === 'normal' ? this.params.sort_next_revisiting_type = 0 : this.params.sort_next_revisiting_type = 2
                        this.params.sort_last_callback_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_callback_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                    case 'last_callback_time_str':
                        column.order === 'asc' ? this.params.sort_last_callback_type = 1 : column.order === 'normal' ? this.params.sort_last_callback_type = 0 : this.params.sort_last_callback_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_callback_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                    case 'next_callback_time_str':
                        column.order === 'asc' ? this.params.sort_next_callback_type = 1 : column.order === 'normal' ? this.params.sort_next_callback_type = 0 : this.params.sort_next_callback_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_last_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_callback_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                    case 'revisiting_count':
                        column.order === 'asc' ? this.params.sort_revisiting_type = 1 : column.order === 'normal' ? this.params.sort_revisiting_type = 0 : this.params.sort_revisiting_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_last_callback_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_callback_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                    case 'missed_days':
                        column.order === 'asc' ? this.params.sort_missed_type = 1 : column.order === 'normal' ? this.params.sort_missed_type = 0 : this.params.sort_missed_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_last_callback_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_callback_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                    case 'callback_count':
                        column.order === 'asc' ? this.params.sort_callback_type = 1 : column.order === 'normal' ? this.params.sort_callback_type = 0 : this.params.sort_callback_type = 2
                        this.params.sort_next_revisiting_type = 0
                        this.params.sort_last_callback_type = 0
                        this.params.sort_next_callback_type = 0
                        this.params.sort_revisiting_type = 0
                        this.params.sort_missed_type = 0
                        this.params.sort_last_revisiting_type = 0
                        break;
                }
                this.askData()
            }
        }
    }
</script>
<style scoped>
    .listContent {
        max-height: 600px;
        overflow: auto;
    }

    /*滚动条样式*/
    .listContent::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .listContent::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    .listContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
    .active{
        color: #49BF8D;
    }
    .nodata{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        width: 100%;
        height: 100%;
        color: #49BF8D;
    }
</style>
